<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Accordion Actions - jQuery EasyUI Demo</title>
    <link href="../../themes/default/easyui.css" rel="stylesheet" type="text/css">
    <link href="../../themes/icon.css" rel="stylesheet" type="text/css">
    <link href="../demo.css" rel="stylesheet" type="text/css">
    <script src="../../jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Accordion Actions</h2>
<div class="demo-info">
    <div class="demo-tip icon-tip"></div>
    <div>Click the buttons below to add or remove accordion items.</div>
</div>
<div style="margin:10px 0;">
    <a class="easyui-linkbutton" href="javascript:void(0)" onclick="select()">Select</a>
    <a class="easyui-linkbutton" href="javascript:void(0)" onclick="add()">Add</a>
    <a class="easyui-linkbutton" href="javascript:void(0)" onclick="remove()">Remove</a>
</div>
<div class="easyui-accordion" id="aa" style="width:500px;height:300px;">
    <div data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;" title="About">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page
            more easily.</p>
    </div>
</div>
<script type="text/javascript">
    function select() {
        $.messager.prompt('Prompt', 'Please enter the panel title:', function (s) {
            if (s) {
                $('#aa').accordion('select', s);
            }
        });
    }

    var idx = 1;

    function add() {
        $('#aa').accordion('add', {
            title: 'Title' + idx,
            content: '<div style="padding:10px">Content' + idx + '</div>'
        });
        idx++;
    }

    function remove() {
        var pp = $('#aa').accordion('getSelected');
        if (pp) {
            var index = $('#aa').accordion('getPanelIndex', pp);
            $('#aa').accordion('remove', index);
        }
    }

</script>
</body>
</html>